<template>
  <div class="site-topbar">
    <div class="container w">
      <div class="hd-left">
        <ul>
          <li v-for="(item, index) in menuLeft" :key="index" @click="item==='小鑫商城'?toMain():''">
            <a href="javascript:;">{{ item }}</a>
          </li>
        </ul>
      </div>
      <div class="hd-right" @mouseleave="hideDropDown">
        <ul>
          <li v-for="(item, index) in menuRight" :key="index">
            <a
              href="javascript:;"
              @click="(item === '登录' ? toLogin() : '')||(item.includes('购物车')&&toShoppingCart())"
               @mouseenter="item === name ? showDropDown() : ''"
              >{{ item }}</a
            >
          </li>
          <div class="dropdown" ref="dropDown"  @mouseleave="hideDropDown">
            <a href="javascript:;">个人中心</a>
            <a href="javascript:;" @click="toLogin">退出</a>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, ref, computed} from "vue-demi";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "SiteTopBar",
  setup() {
    const dropDown = ref(null);
    const router = useRouter();
    const store = useStore();
    const menu = reactive({
      menuLeft: [
        "小鑫商城",
        "MIUI",
        "IoT",
        "云服务",
        "天星数科",
        "有品",
        "小鑫开放平台",
        "企业团购",
        "资质证照",
        "协议规则",
        "下载app",
        "Select Location",
      ],
      menuRight: store.state.user.menuRight,
    });
   //登录后的用户名
   const name = computed(() => store.state.user.name) ;
    function toLogin() {
      store.commit('user/reMenu')
      router.push({ name: "loginOrRegister" });
    }
    // 显示个人中心
    function showDropDown() {
      dropDown.value.style.display = "block";
    }
    // 隐藏个人中心
    function hideDropDown() {
      dropDown.value.style.display = "none";
    }
    // 去主页
    function toMain() {
      router.push({name: 'home'})
    }
    // 去购物车 
    function toShoppingCart() {
      router.push({name: 'shoppingCart'})
    }
    return {
      ...toRefs(menu),
      toLogin,
      showDropDown,
      hideDropDown,
      name,
      dropDown,
      toMain,
      toShoppingCart
    };
  },
};
</script>

<style lang="less" scoped>
.site-topbar {
  background-color: #333;
  .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .hd-left {
      ul {
        display: flex;
        li {
          a {
            padding: 0 8px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            color: #b0b0b0;
            font-size: 12px;
            &:hover {
              color: white;
            }
          }
        }
      }
    }
    .hd-right {
      position: relative;
      ul {
        display: flex;
        li {
          height: 40px;
          line-height: 40px;
          &:last-child {
            position: relative;
            a {
              margin-left: 8px;
              &::before {
                position: absolute;
                top: 3px;
                left: 0;
                font-family: "icomoon";
                content: "\ea13";
              }
            }
          }
          a {
            padding: 0 8px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            color: #b0b0b0;
            font-size: 12px;
            &:hover {
              color: white;
            }
          }
          &:nth-child(3) a {
            border: 0;
          }
          &:nth-child(4) {
            background-color: #424242;
            a {
              border: 0;
            }
          }
        }
      }
      .dropdown {
        display: none;
        position: absolute;
        top: 40px;
        left: 2px;
        background-color: #333;
        &:hover {
          display: block;
        }

        a {
          display: block;
          padding: 5px;
          font-size: 12px;
          color: #b0b0b0;
          &:hover {
            color: white;
          }
        }
      }
    }
  }
}
</style>